<template>
  <div class="c-bg-sgray theme-market">
    <div class="c-bg-sgray">
      <div class="c-bg-white c-ph24">
        <div @click="clickGoTask(item)" class="c-bg-white c-flex-row c-pv24 c-bd-b1" v-for="(item,index) in taskList" :key="index">
          <div class="c-ww210 c-hh140 c-text-hidden c-p c-br16">
            <vip-custom-img :cover="item.cover" :imgClass="'imgCloseBig c-br16'" :fontClass="{
              boxStyle: 'c-pt40 c-pb48 c-pl12',
              name: 'c-fs32 c-text-ellipsis1 c-fw-b',
              duration: 'c-fs26'}" :content="{name: item.name, duration: item.duration, durationType: item.durationType}"
              v-if="item.cover && (item.cover.coverType==1 || item.cover.coverType==2)"/>
            <CoverImg v-else coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.vipType==2||item.vipType==4?(item.vipType==2?require('../../../assets/i/wap/course/vip.png'):require('../../../assets/i/wap/course/svip.png')):item.avatar?item.avatar:require('../../../assets/defult270.png'))" />
            <div class="timeShow" v-if="item.btnStatus == 1 || item.btnStatus == 2">距{{item.btnStatus == 1 ? '开始' : '结束'}}：
              <cj-clocker :time="timeFn(index)" format="%D 天 %H : %M : %S" @on-finish="finishFn(index)"></cj-clocker>
            </div>
          </div>
          <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
            <div class="c-fs24 c-text-ellipsis2 c-lh32">{{item.name}}</div>
            <div>
              <div class="c-fs18 c-fc-gray c-text-decoration-through" v-if="!$isWxAppIos()">单买价{{item.price}}</div>
              <div class="c-flex-row c-aligni-center">
                <div class="c-fs20 c-flex-grow1 c-w0" v-if="!$isWxAppIos()" :class="item.btnStatus==1?'c-fc-xblue':'c-fc-xmlred'">助力：<span class="c-fw600">{{'￥' | iosPriceFilter}}</span><span class="c-fs26 c-fw600">0.00</span></div>
                <div :class="item.btnStatus==1?'theme-fc theme-bg-10':'theme-bg-gradient'" class="c-fc-white c-fs22 c-flex-row c-flex-center c-ww120 c-hh50 c-br25">{{item.btnStatus==1?'去看看':'助力领取'}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="taskList.length == 0" :showLoading="isLoading == true" :noMoreData="taskList.length > 0 && is_page == false" :noDataText="'暂无结果'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "taskList",
  components: {
    loadingStatusTem,
    VipCustomImg,
    CoverImg
  },
  props: [],
  data() {
    return {
      cfrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      autofocus: false,
      is_page: false,
      page: 1,
      limit: 10,
      searchText: '',
      taskList: [],
      isLoading: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  methods: {
    // startSearch(e) {
    //   this.page = 1;
    //   this.taskList = [];
    //   utilJs.toPageScrollTop();
    //   this.searchText = e.searchValue
    //   this.getMore();
    // },
    timeFn: function (index) {
      let stime = this.taskList
        ? utilJs.getTimeByDate(this.taskList[index].startAt)
        : 0;
      let etime = this.taskList
        ? utilJs.getTimeByDate(this.taskList[index].endAt)
        : 0;
      let nowTime = new Date().getTime();
      //status 1未开始,2进行中,3已结束,4已停止
      let time = "";
      if (stime > nowTime) {
        //未开始
        this.taskList[index].btnStatus = 1;
        time = this.taskList[index].startAt;
      } else if (etime > nowTime) {
        //正在进行中
        this.taskList[index].btnStatus = 2;
        time = this.taskList[index].endAt;
      }
      return time;
    },
    finishFn: function (index) {
      if (this.taskList[index].btnStatus == 1) {
        this.taskList[index].btnStatus = 2;
      }
    },
    //分页获取助力列表
    getMore() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'friendHelpers/list?name=' + this.searchText + '&page=' + this.page + '&limit=' + this.limit, function (res) {
          if ($this.page == 1) {
            $this.taskList = res.data;
          } else {
            let list = res.data;
            $this.taskList = $this.taskList.concat(list);
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;

          $this.isLoading = false;
        });
      }
    },
    clickGoTask: function (tItem) {
      let type = tItem.prodType;
      let prodId = tItem.prodId;
      // 跳转到对应的详情页面 好友灌溉接口约定的prodType  0视频，1音频，2图文，3课程，4专栏，5vip升级页面，6测评，7交互测评，8语音测评，9知识套餐，10打卡，11训练营 ，12社群，13约课，14直播，15电子书，16资料库
      // 将好友灌溉接口约定的prodType 转为 goDetails.js中typeToUrl的key值
      let typeArr = [5, 5, 5, 5, 9, 1, 11, 75, 77, 61, 41, 78, 10, 53, 51, 142, 8];
      type = typeArr[Number(type)];
      let query = {}
      if (type == global.ckFrom.vip && (tItem.btnStatus == 1 || tItem.btnStatus == 2)) {
        query.isFa = true;
        prodId = tItem.faId;
      }
      goDetails(this, type, prodId, query, (tItem.courseType || 0));
    },
    //分享
    wechatShare: function () {
      let title = "助力专区";//window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/task/taskList?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/task/taskList?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    //下滑加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    initData() {
      this.searchText = '';
      this.page = 1;
      this.is_page = false;
      this.taskList = [];
      this.getMore();
    }
  },
  activated() {
    //助力列表
    setDocumentTitle("助力专区");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.taskList, this.page)) {
      this.initData();
    }
    this.wechatShare();
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.timeShow {
  font-size: 0.45rem;
  color: #fff;
  line-height: .7rem;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .15rem 0;
}
.c-mb36 {
  margin-bottom: 0.9rem;
}
</style>
